import React from "react"
import PropTypes from "prop-types"
import "../../assets/css/listView.css"
import $ from "jquery"
import { Button } from 'antd';
import Cell from "../base/Cell.jsx"
import Header from "../base/Header.jsx"
import { Spin,Collapse} from 'antd';
const Panel = Collapse.Panel;
import { TabBar} from 'antd-mobile';
import  Preview from  "../base/base.jsx";


console.log(Preview);

class ListView extends React.Component{
    constructor(props){
        super(props);
        this.state={
            list:[],
            totals:{},
            args:{},
            loading:true,
            selectTab:'淘宝',
            tabList:[0,0,0,0],
            currentList:[],
            isShowPreview:false,
            currentImgSrc:"",
        }
        this.toIndex=this.toIndex.bind(this);
        this.isLoading=this.isLoading.bind(this);
        this.currentList=this.currentList.bind(this);
    }
    componentWillMount(){
        let This=this;
        $.ajax({
            url:"http://101.132.154.41:8008/query_bs",
            type:"post",
            timeout:5000,
            data:this.state.args,
            success:function(json){
                This.setState({loading:false});
                if(json.code==20000){
                    //This.state.list=json.data;
                    This.setState({
                        list:json.data.reverse(),
                        totals:json.totals,
                    },()=>{
                        This.currentList();
                        let tabList=This.state.tabList;
                        This.state.list.forEach(value=>{
                            if(value.platform==="淘宝"){
                                tabList[0]++;
                            }else if(value.platform==="京东"){
                                tabList[1]++;
                            }else if(value.platform==="拼多多"){
                                tabList[2]++;
                            }else{
                                tabList[3]++;
                            }
                        })
                        This.setState({tabList});
                    })
                }else{
                    alert(json.error);
                }
            },
            error:function(){
                This.setState({loading:false});
            }
        })
    }
    currentList(){
        let currentList=[];
        this.state.list.forEach(value=>{
            if(value.platform===this.state.selectTab){
                currentList.push(value);
            }
        });
        this.setState({currentList});
    }
    toIndex(index){
        let data=this.state.currentList[index];
        var id=data.id;
        delete  data.id;
        data.id=id;
        this.props.history.push({ pathname:'/index',query:data})
    }
    inputDataPage(){
        this.props.history.push({ pathname:'/index'})
    }

    isLoading(){
        if(this.state.loading){
            return (
                <div  className="listview-spin-box">
                    <Spin  size="large"/>
                </div>
            )
        }else {
            return (
                <div className="content-box mt68">
                    <nav className="float-left-right-box h100">
                        <div className="float-left">
                            <div>
                                <span>总单数：</span>
                                <span>{this.state.totals.listTotal}</span>
                            </div>
                            <div>
                                <span>垫付总额：</span>
                                <span>{this.state.totals.priceTotal}</span>
                            </div>
                            <div>
                                <span>佣金总额：</span>
                                <span>{this.state.totals.commissionTotal}</span>
                            </div>
                        </div>
                    </nav>
                    <Collapse>
                        {this.state.currentList.map((value, index)=>
                            (
                                <Panel key={index} header={value.platform+"    "+value.insertTime}>
                                    <div onClick={this.toIndex.bind(this, index)} className="list-view-item-box">
                                        <Cell label="平台" value={value.platform}/>
                                        <Cell label="商品名称" value={value.commodity_name}/>
                                        <Cell label="商品价格" value={value.price}/>
                                        <Cell label="是否返本金" value={value.is_price == 0 ? "未返" : "已返"}/>
                                        <Cell label="佣金" value={value.commission}/>
                                        <Cell label="是否返佣金" value={value.is_commission == 0 ? "未返" : "已返"}/>
                                        <Cell label="是否签收" value={value.sign == 0 ? "未签收" : "已签收"}/>
                                        <Cell label="是否代付" value={value.pay == 0 ? "非代付" : "代付"}/>
                                        <Cell label="记录时间" value={value.insertTime}/>
                                        <Cell label="是否完结" value={value.is_end == 0 ? "未完结" : "已完结"}/>
                                        <Cell label="店铺名称" value={value.shop_name}/>
                                        <Cell label="礼品" value={value.gift}/>
                                        <Cell label="图片" newClass="listview-item-imgage-box" className="listview-img-box"
                                              right={
                                                  <img onClick={this.show.bind(this)} className="cell-value list-view-item-img" src={value.imgsrc}/>
                                              }
                                        />
                                    </div>
                                </Panel>
                            )
                        )}
                    </Collapse>
                </div>
            )
        }
    }
    hide(){
        this.setState({isShowPreview:false});
    }
    show(e){
        e.stopPropagation();
        this.setState({isShowPreview:true,currentImgSrc:e.target.src});
    }
    render() {
        return (
            <div>

                <Header headerText="列表" isRight={true} rightText="录数据"  headerRightGo={this.inputDataPage.bind(this)} />
                {this.isLoading()}
                <footer  className="listview-footer">
                    <TabBar barTintColor="white" >
                        <TabBar.Item
                            icon={{ uri: require("../../assets/css/svg/taobao.svg") }}
                            selectedIcon={{ uri: require("../../assets/css/svg/taobao-selected.svg") }}
                            selected={this.state.selectTab==='淘宝'}
                            onPress={()=>{this.setState({selectTab:"淘宝"},()=>{
                                this.currentList();
                            })}}
                            title="淘宝"
                            badge={this.state.tabList[0]}
                        ></TabBar.Item>
                        <TabBar.Item
                            icon={{ uri: require("../../assets/css/svg/jd.svg") }}
                            selectedIcon={{ uri: require("../../assets/css/svg/jd-selected.svg") }}
                            selected={this.state.selectTab==='京东'}
                            onPress={()=>{this.setState({selectTab:"京东"},()=>{
                                this.currentList();
                            })}}
                            badge={this.state.tabList[1]}
                            title="京东"
                        ></TabBar.Item>
                        <TabBar.Item
                            icon={{ uri: require("../../assets/css/svg/tg.svg") }}
                            selectedIcon={{ uri: require("../../assets/css/svg/tg-selected.svg") }}
                            selected={this.state.selectTab==='拼多多'}
                            onPress={()=>{this.setState({selectTab:"拼多多"},()=>{
                                this.currentList();
                            })}}
                            badge={this.state.tabList[2]}
                            title="拼多多"
                        ></TabBar.Item>
                        <TabBar.Item
                            icon={{ uri: require("../../assets/css/svg/other.svg") }}
                            selectedIcon={{ uri: require("../../assets/css/svg/other-selected.svg") }}
                            selected={this.state.selectTab==='其他'}
                            onPress={()=>{this.setState({selectTab:"其他"},()=>{
                                this.currentList();
                            })}}
                            title="其他"
                            badge={this.state.tabList[3].toString()}
                        ></TabBar.Item>
                    </TabBar>
                </footer>

                <Preview imgsrc={this.state.currentImgSrc} isShowPreview={this.state.isShowPreview} hide={this.hide.bind(this)}/>
            </div>
        )
    }
}

export default ListView